"use client";

import { useState } from "react";

export default function Header() {

  const [active, setActive] = useState(false);

  const changeTheme = (type: string) => {
    if (document.documentElement.classList.contains("dark")) {
      document.documentElement.classList.remove("dark");
    } else {
      document.documentElement.classList.add("dark");
    }
    const event = new Event("themeChange");
    document.dispatchEvent(event);
  };

  const changeTab = (event: any) => {
    setActive(!active);
    const showModal = document.getElementById('showModal')
    const header = document.getElementById('header')
    const Vector = document.getElementById('Vector')
    const hamburger = document.getElementsByClassName('hamburger hamburger--spin svelte-jas1sv')?.[1]

    if (showModal?.classList.contains('hidden')) {
      if (document.documentElement.classList.contains("dark")) {
        header?.classList.remove('dark:border-transparent')
        header?.classList.remove('dark:mix-blend-difference')
        showModal?.classList.add('dark:text-white')
      }

      Vector?.classList.add('bg-black')

      showModal?.classList.remove('hidden')
      showModal?.classList.add('fixed')

      
    } else {
      showModal?.classList.remove('fixed')
      showModal?.classList.add('hidden')
      header?.classList.add('dark:border-transparent')
      header?.classList.add('dark:mix-blend-difference')
    }
    
  }
  return (
    <header 
    id="header"     
                //  sticky top-0 flex items-center justify-between py-7 lg:py-10 px-8  dark:text-white lg:px-20 z-50 border-b border-transparent dark:border-transparent dark:mix-blend-difference transition-all
      className="dark:text-white sticky top-0 flex items-center justify-between py-7 lg:py-10 px-8 lg:px-20 z-50 border-b border-transparent dark:border-transparent dark:mix-blend-difference transition-all"
    >
      <a
        href="/"

        className="flex items-center hover:opacity-80 transition-opacity"
      >
        <svg
          color="black"
          width="33px"
          height="33px"
          viewBox="0 0 33 33"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            id="Vector"
            d="M13.1047 26.7745L14.6029 25.2665L15.3981 26.0669L12.75 28.7322L8.20482 24.1574L14.6029 17.7176L15.3981 18.518L10.1453 23.805L9.79515 24.1574L10.1453 24.5098L12.3953 26.7745L12.75 27.1315L13.1047 26.7745ZM13.8519 22.2925L14.647 21.4922L19.8952 26.7746L20.2499 27.1316L20.6046 26.7746L22.8546 24.51L23.2047 24.1576L22.8546 23.8052L21.3518 22.2926L22.147 21.4921L24.7952 24.1575L20.25 28.7322L13.8519 22.2925ZM20.2506 4.48439L24.7958 9.05914L18.3977 15.4989L17.6025 14.6986L22.8553 9.41158L23.2055 9.05917L22.8553 8.70677L20.6053 6.44212L20.2506 6.08512L19.8959 6.44212L18.3977 7.95012L17.6025 7.14979L20.2506 4.48439ZM22.1471 13.9433L27.3953 19.2257L27.75 19.5827L28.1047 19.2257L30.3547 16.9611L30.7049 16.6087L30.3547 16.2563L28.1047 13.9916L27.75 13.6346L27.3953 13.9916L25.8971 15.4996L25.1019 14.6993L27.75 12.0339L32.2952 16.6087L27.75 21.1834L21.3519 14.7437L22.1471 13.9433ZM5.60467 19.2257L7.10291 17.7177L7.89812 18.518L5.25 21.1834L0.704823 16.6086L5.24994 12.0339L11.6481 18.4736L10.8529 19.274L5.60467 13.9916L5.24997 13.6346L4.89527 13.9916L2.64527 16.2562L2.29515 16.6086L2.64527 16.961L4.89527 19.2257L5.24997 19.5827L5.60467 19.2257ZM12.75 4.48505L19.1481 10.9248L18.3529 11.7252L13.1047 6.44279L12.75 6.08578L12.3953 6.44279L10.1453 8.70743L9.79515 9.05984L10.1453 9.41224L11.6481 10.9248L10.8529 11.7252L8.20482 9.05981L12.75 4.48505ZM15.3981 10.9692L10.897 15.4996L10.1019 14.6993L14.6029 10.1689L15.3981 10.9692ZM18.353 19.274L13.8519 14.7436L14.647 13.9433L19.1481 18.4737L18.353 19.274ZM17.6018 22.248L22.1029 17.7177L22.8981 18.5181L18.397 23.0484L17.6018 22.248ZM16.5295 4.7672L14.5137 2.73831L16.5295 0.709411L18.5453 2.73831L16.5295 4.7672ZM16.5295 32.2906L14.5138 30.2617L16.5295 28.2328L18.5453 30.2617L16.5295 32.2906Z"
            className="fill-black dark:fill-white stroke-black dark:stroke-white"
          ></path>
        </svg>
        <span className="tracking-ritual-widest text-lg pl-2.5">RITUAL</span>
      </a>
      <div className="flex items-center space-x-4 transition-all duration-1500 ease-in-out">
        <div id='showModal' className="dark:text-white bg-white dark:bg-black lg:bg-transparent lg:dark:bg-transparent w-screen h-screen z-40 lg:w-auto lg:h-auto fixed top-0 left-0 lg:top-auto lg:left-auto lg:relative lg:flex items-center space-y-10 lg:space-y-0 lg:space-x-7 hidden transition-all pt-28 px-8 lg:p-0">
          <ul className="flex flex-col lg:flex-row space-y-5 lg:space-y-0 lg:space-x-7 tracking-ritual-wide text-xl lg:text-sm font-sans font-normal ">
            <li>
              <a
                className="opacity-50 hover:opacity-100 transition-opacity"
                href="#"
              >
                ABOUT
              </a>
            </li>
            <li>
              <a
                className="opacity-50 hover:opacity-100 transition-opacity"
                href="#"
              >
                PRODUCT
              </a>
            </li>
            <li>
              <a
                className="opacity-50 hover:opacity-100 transition-opacity"
                href="#"
              >
                WRITING
              </a>
            </li>
            <li>
              <a
                className="opacity-50 hover:opacity-100 transition-opacity"
                href="#"
              >
                TEAM
              </a>
            </li>
            <li>
              <a
                className="opacity-50 hover:opacity-100 transition-opacity"
                href="#"
              >
                CAREERS
              </a>
            </li>
          </ul>
          <section
            className="flex space-x-2.5 [&amp;>a]:w-10 [&amp;>a]:h-10 [&amp;>a]:pt-2.5 [&amp;>a]:pl-2.5 [&amp;>a]:border [&amp;>a]:border-ritual-black-20 dark:[&amp;>a]:border-ritual-white-20 [&amp;>a]:rounded [&amp;>a]:transition-all"
            data-svelte-h="svelte-srbfxb"
          >
            {" "}
            <a
              href="https://twitter.com/ritualnet"
              aria-label="Twitter"
              target="_blank"
              rel="noopener noreferrer"
              className="hover:border-black dark:hover:border-white aBoder"
            >
              <svg
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g>
                  <path
                    d="M9.52217 6.77143L15.4785 0H14.0671L8.89516 5.87954L4.76437 0H0L6.24656 8.8909L0 15.9918H1.41155L6.87321 9.78279L11.2356 15.9918H16L9.52183 6.77143H9.52217ZM7.58887 8.96923L6.95596 8.0839L1.92015 1.03921H4.0882L8.15216 6.7245L8.78507 7.60983L14.0677 14.9998H11.8997L7.58887 8.96957V8.96923Z"
                    className="fill-black dark:fill-white"
                  ></path>
                </g>
                <defs>
                  <clipPath>
                    <rect
                      width="16"
                      height="16"
                      className="fill-black dark:fill-white"
                    ></rect>
                  </clipPath>
                </defs>
              </svg>
            </a>{" "}
            <a
              href="https://discord.com/invite/ritual-net"
              aria-label="Discord"
              target="_blank"
              rel="noopener noreferrer"
              className="hover:border-black dark:hover:border-white aBoder"
            >
              <svg
                width="16"
                height="20"
                viewBox="0 0 16 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M14.0742 0.5C15.1128 0.5 15.9505 1.40012 16 2.45937V19.5L14.0224 17.7005L12.9365 16.6413L11.7516 15.5345L12.2466 17.2801H1.87636C0.840664 17.2801 0 16.437 0 15.32V2.46334C0 1.40409 0.842144 0.502375 1.88005 0.502375H14.069L14.0742 0.5ZM9.55464 4.99904H9.53248L9.38328 5.15737C10.9146 5.63237 11.6556 6.37416 11.6556 6.37416C10.6686 5.84534 9.7792 5.58091 8.88976 5.47404C8.24712 5.36716 7.60442 5.42337 7.06146 5.47404H6.9137C6.5665 5.47404 5.82778 5.63237 4.8379 6.05591C4.49291 6.21663 4.29494 6.32191 4.29494 6.32191C4.29494 6.32191 5.03514 5.52866 6.66623 5.10513L6.5665 4.99825C6.5665 4.99825 5.33136 4.94759 3.99797 6.00366C3.99797 6.00366 2.66458 8.49266 2.66458 11.5611C2.66458 11.5611 3.4033 12.9386 5.42962 12.9909C5.42962 12.9909 5.7251 12.569 6.02429 12.1976C4.88665 11.8271 4.44342 11.0861 4.44342 11.0861C4.44342 11.0861 4.54241 11.1384 4.69089 11.2445H4.73522C4.75738 11.2445 4.76772 11.2564 4.77954 11.2682V11.273C4.79136 11.2856 4.8017 11.2967 4.82386 11.2967C5.06764 11.4044 5.31142 11.5105 5.51087 11.6134C5.85512 11.7734 6.29762 11.9325 6.84058 12.0378C7.52758 12.1446 8.31504 12.1961 9.21184 12.0378C9.65512 11.9309 10.0983 11.8264 10.5416 11.6142C10.8297 11.4559 11.1842 11.2975 11.5736 11.0307C11.5736 11.0307 11.1303 11.7717 9.94472 12.1423C10.1885 12.5111 10.532 12.9339 10.532 12.9339C12.559 12.8864 13.3465 11.5089 13.3908 11.5675C13.3908 8.50375 12.0501 6.01 12.0501 6.01C10.8422 5.04891 9.712 5.0125 9.51256 5.0125L9.55392 4.99666L9.55464 4.99904ZM9.67872 8.49266C10.1981 8.49266 10.617 8.96764 10.617 9.54953C10.617 10.1354 10.1958 10.6104 9.67872 10.6104C9.16168 10.6104 8.74056 10.1354 8.74056 9.55433C8.74208 8.96846 9.16384 8.49504 9.67872 8.49504V8.49266ZM6.32273 8.49266C6.83983 8.49266 7.25795 8.96764 7.25795 9.54953C7.25795 10.1354 6.83688 10.6104 6.31978 10.6104C5.80267 10.6104 5.3816 10.1354 5.3816 9.55433C5.3816 8.96846 5.80267 8.49504 6.31978 8.49504L6.32273 8.49266Z"
                  className="fill-black dark:fill-white"
                ></path>
              </svg>
            </a>{" "}
            <a
              href="https://github.com/ritual-net"
              aria-label="GitHub"
              target="_blank"
              rel="noopener noreferrer"
              className="hover:border-black dark:hover:border-white aBoder"
            >
              <svg
                width="18"
                height="18"
                viewBox="0 0 18 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g>
                  <path
                    fillRule="evenodd"
                    clipRule="evenodd"
                    d="M8.97467 0.5C4.2884 0.5 0.5 4.39583 0.5 9.21551C0.5 13.0681 2.92736 16.3293 6.29474 17.4835C6.71575 17.5703 6.86997 17.296 6.86997 17.0653C6.86997 16.8632 6.85609 16.1706 6.85609 15.449C4.49864 15.9686 4.00772 14.4101 4.00772 14.4101C3.62887 13.4 3.06752 13.1404 3.06752 13.1404C2.29593 12.6065 3.12372 12.6065 3.12372 12.6065C3.97962 12.6642 4.42874 13.5011 4.42874 13.5011C5.18628 14.8285 6.40698 14.4535 6.89807 14.2225C6.96815 13.6598 7.1928 13.2702 7.43132 13.0538C5.55108 12.8517 3.57284 12.1014 3.57284 8.75368C3.57284 7.80132 3.90937 7.02216 4.44261 6.41618C4.35848 6.19978 4.06376 5.30498 4.52692 4.10736C4.52692 4.10736 5.24248 3.87645 6.85592 5.00199C7.54669 4.81121 8.25907 4.71416 8.97467 4.71334C9.69024 4.71334 10.4197 4.81446 11.0933 5.00199C12.7069 3.87645 13.4224 4.10736 13.4224 4.10736C13.8856 5.30498 13.5907 6.19978 13.5066 6.41618C14.0539 7.02216 14.3765 7.80132 14.3765 8.75368C14.3765 12.1014 12.3983 12.8372 10.504 13.0538C10.8128 13.3279 11.0792 13.8473 11.0792 14.6699C11.0792 15.8386 11.0653 16.7766 11.0653 17.0651C11.0653 17.296 11.2197 17.5703 11.6406 17.4837C15.0079 16.3291 17.4353 13.0681 17.4353 9.21551C17.4492 4.39583 13.6469 0.5 8.97467 0.5Z"
                    className="fill-black dark:fill-white"
                  ></path>
                </g>
                <defs>
                  <clipPath>
                    <rect
                      width="17"
                      height="17"
                      className="fill-black dark:fill-white"
                      transform="translate(0.5 0.5)"
                    ></rect>
                  </clipPath>
                </defs>
              </svg>
            </a>
          </section>
        </div>

        <div className="z-50 lg:hidden " onClick={changeTab}>
          <div className="[&amp;>div>button>span>span]:!bg-black [&amp;>div>button>span>span]:before:!bg-black [&amp;>div>button>span>span]:after:!bg-black [&amp;>div>button>span>span]:dark:!bg-white [&amp;>div>button>span>span]:before:dark:!bg-white [&amp;>div>button>span>span]:after:dark:!bg-white">
            <div className="z_50Class">
              {" "}
              <button
                className={`hamburger hamburger--spin svelte-jas1sv ${active ? "is-active" : "" }`}
                aria-label="Hamburger menu"
              >
                <span
                 
                  className={`hamburger-box svelte-jas1sv HamburgerItem `}
                  data-svelte-h="svelte-kk1wi2"
                >
                  <span className="hamburger-inner svelte-jas1sv !dark:bg-white"></span>
                </span>
              </button>
            </div>
          </div>
        </div>

        <div className="z-50 hidden dark:block">
          <div className="[&amp;>div>button>span>span]:!bg-black [&amp;>div>button>span>span]:before:!bg-black [&amp;>div>button>span>span]:after:!bg-black [&amp;>div>button>span>span]:dark:!bg-white [&amp;>div>button>span>span]:before:dark:!bg-white [&amp;>div>button>span>span]:after:dark:!bg-white">
            <div className="z_50Class">
              {" "}
              <button
                onClick={() => changeTheme("light")}
                className="hamburger hamburger--spin svelte-jas1sv"
                aria-label="Hamburger menu"
              >
                <span
                  className="hamburger-box svelte-jas1sv"
                  data-svelte-h="svelte-kk1wi2"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="18"
                    height="18"
                    strokeWidth="0"
                    viewBox="0 0 56 56"
                  >
                    <path
                      d="M30 4.6c0-1-.9-2-2-2a2 2 0 00-2 2v5c0 1 .9 2 2 2s2-1 2-2zm9.6 9a2 2 0 000 2.8c.8.8 2 .8 2.9 0L46 13a2 2 0 000-2.9 2 2 0 00-3 0zm-26 2.8c.7.8 2 .8 2.8 0 .8-.7.8-2 0-2.9L13 10c-.7-.7-2-.8-2.9 0-.7.8-.7 2.1 0 3zM28 16a12 12 0 00-12 12 12 12 0 0012 12 12 12 0 0012-12 12 12 0 00-12-12zm0 3.6c4.6 0 8.4 3.8 8.4 8.4 0 4.6-3.8 8.4-8.4 8.4a8.5 8.5 0 01-8.4-8.4c0-4.6 3.8-8.4 8.4-8.4zM51.3 30c1.1 0 2-.9 2-2s-.9-2-2-2h-4.9a2 2 0 00-2 2c0 1.1 1 2 2 2zM4.7 26a2 2 0 00-2 2c0 1.1.9 2 2 2h4.9c1 0 2-.9 2-2s-1-2-2-2zm37.8 13.6a2 2 0 00-3 0 2 2 0 000 2.9l3.6 3.5a2 2 0 002.9 0c.8-.8.8-2.1 0-3zM10 43.1a2 2 0 000 2.9c.8.7 2.1.8 3 0l3.4-3.5c.8-.8.8-2.1 0-2.9-.8-.8-2-.8-2.9 0zm20 3.4c0-1.1-.9-2-2-2a2 2 0 00-2 2v4.9c0 1 .9 2 2 2s2-1 2-2z"
                      stroke="none"
                      className="fill-white"
                    ></path>
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </div>
        <div className="z-50 dark:hidden">
          <button
            onClick={() => changeTheme("dark")}
            className="p-1"
            aria-label="Toggle theme color"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="18"
              height="18"
              strokeWidth="0"
              viewBox="0 0 56 56"
            >
              <path
                d="M41.2 36.1c-12.9 0-21-7.8-21-20.3 0-3.5.7-6.7 1.6-8.3.3-.7.4-1 .4-1.5 0-.8-.7-1.7-1.7-1.7-.2 0-.7 0-1.3.3A24.5 24.5 0 004.4 27.1 23.8 23.8 0 0029 51.7c10.2 0 18.4-5.3 22.3-14.1l.3-1.4c0-1-.9-1.6-1.6-1.6a3 3 0 00-1.2.2c-2 .8-4.8 1.3-7.6 1.3zM8.1 27c0-7.3 3.8-14.3 9.9-18-.8 2-1.2 4.5-1.2 7.2 0 14.6 9 23.3 23.9 23.3 2.4 0 4.5-.2 6.4-1a20.8 20.8 0 01-18 9.6C17 48 8.1 39 8.1 27z"
                stroke="none"
                className="fill-black"
              ></path>
            </svg>
          </button>
        </div>
      </div>
    </header>
  );
}
